<!--月度企业能耗排名-->
<template>
    <div class="business_energy">
        <CommonTitleComponent text="月度企业能耗排名"></CommonTitleComponent>
        <div class="toggle_list">
            <div
                v-for="(item, index) in state.toggleList"
                :key="index"
                :class="toggleValue == index ? 'isacive' : ''"
                @click="toggleValue = index"
            >
                {{ item.name }}
            </div>
        </div>
        <div class="business_energy_echarts">
            <CommonCompanyRank :list-data="state.list"></CommonCompanyRank>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';

const toggleValue = ref(0);
const state = reactive({
    toggleList: [
        {
            name: '电'
        },
        {
            name: '水'
        },
        {
            name: '气'
        }
    ],
    list: [
        {
            name: '山东达冠生化科技股份有限公司',
            value: 24,
            lineColor: 'linear-gradient(180deg, #F78B9B 0%, #FC361C 100%)'
        },
        {
            name: '临沂力强化工有限公司',
            value: 30,
            lineColor: ' linear-gradient(180deg, #F7B68B 0%, #FC701C 100%)'
        },
        {
            name: '山东三丰新材料有限公司',
            value: 23,
            lineColor: 'linear-gradient(180deg, #F7E48B 0%, #FCCF1C 100%)'
        },
        {
            name: '临沂长青化工有限公司',
            value: 26,
            lineColor: 'linear-gradient(180deg, #2DBAFB, #58F3FD)'
        },
        {
            name: '临沂六环化工有限公司',
            value: 26,
            lineColor: 'linear-gradient(180deg, #2DBAFB, #58F3FD)'
        }
    ]
});
</script>

<style scoped lang="scss">
.business_energy {
    padding-top: 10px;
    height: 100%;
    .toggle_list {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
        > div {
            width: 40px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            color: #ffffff;
            border-radius: 10px;
            background: rgba(27, 147, 251, 0.2);
            margin-right: 8px;
            &:last-child {
                cursor: pointer;
                margin-right: 0;
            }
        }
        .isacive {
            background: #1b93fb;
        }
    }
    &_echarts {
        height: 80%;
        padding-top: 12px;
    }
}
</style>
